<template>
    <div class="f-header">
        <!-- 网站 logo -->
        <span class="logo-section">
            <img class="logo" :src="logoUrl" alt="">
            <span class="system-name">{{ systemName }}</span>
        </span>

        <!-- 刷新按钮 -->
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
        </el-tooltip>

        <!-- 汉堡菜单按钮 (移动端) -->
        <div class="hamburger-btn" @click="showMobileMenu = !showMobileMenu">
            <el-icon size="24px">
                <Menu />
            </el-icon>
        </div>

        <!-- 导航菜单 -->
        <div class="menu-container" :class="{ 'mobile-menu-active': showMobileMenu }">
            <el-menu
                    :default-active="activeIndex"
                    mode="horizontal"
                    @select="handleSelect"
                    class="desktop-menu"
            >
                <el-menu-item v-for="item in menus" :key="item.content" :index="item.url">{{ item.content }}</el-menu-item>
            </el-menu>

            <!-- 移动端菜单 -->
            <div class="mobile-menu">
                <div class="mobile-menu-items">
                    <div
                            v-for="item in menus"
                            :key="item.content"
                            :class="['mobile-menu-item', { 'active': activeIndex === item.url }]"
                            @click="handleMobileMenuClick(item.url)"
                    >
                        {{ item.content }}
                    </div>
                </div>
                <!-- 移动端菜单遮罩 -->
                <div class="mobile-menu-mask" @click="showMobileMenu = false"></div>
            </div>
        </div>

        <!-- 右侧操作按钮 -->
        <div class="ml-auto flex items-center">
            <!-- 全屏按钮 -->
            <el-tooltip effect="dark" content="全屏" placement="bottom">
                <el-icon class="icon-btn" @click="toggle">
                    <FullScreen v-if="!isFullscreen"/>
                    <Aim v-else/>
                </el-icon>
            </el-tooltip>
            <!-- 用户下拉菜单 -->
            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex items-center text-light-50">
                    <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <ArrowDown />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-if="!isMobile" command="userInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit" >
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item prop="password" label="旧密码">
                <el-input v-model="form.password" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="newPass" label="新密码">
                <el-input type="password" v-model="form.newPass" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
        </el-form>
    </form-drawer>
</template>

<script setup>
    import FormDrawer from '~/components/FormDrawer.vue'
    import { useRepassword, useLogout } from "~/composables/useManager"
    import { useFullscreen } from '@vueuse/core'
    import { ref, onMounted, onUnmounted,computed } from 'vue'
    import { useRouter } from "vue-router"
    import defaultLogo from '~/assets/logo.png'
    import store from "~/store"

    const logoUrl = computed(() => {
        const configUrl = store.state.config?.url
        return configUrl && configUrl !== '' ? configUrl : defaultLogo
    })

    const systemName = computed(() => {
        const configName = store.state.config?.topName
        return configName && configName !== '' ? configName : "救护消防应急救援中心微课系统"
    })

    const router = useRouter()
    // 导航菜单数据
    const menus = [
        {
            content: "首页",
            url: "/"
        },
        {
            content: "课程",
            url: "/course"
        },
        {
            content: "资料",
            url: "/file"
        },
        {
            content: "考试",
            url: "/exam"
        },
        {
            content: "反馈",
            url: "/feedback"
        },
        {
            content: "公告",
            url: "/announce"
        }
    ]

    // 全屏功能
    const {
        isFullscreen,
        toggle
    } = useFullscreen()

    // 修改密码相关
    const {
        formDrawerRef,
        form,
        rules,
        formRef,
        onSubmit,
        openRePasswordForm
    } = useRepassword()

    // 退出登录相关
    const {
        handleLogout
    } = useLogout()

    // 当前激活的菜单项
    const activeIndex = ref('')

    const isMobile = ref(false)

    // 控制移动端菜单显示
    const showMobileMenu = ref(false)

    // 窗口大小变化监听
    const handleResize = () => {
        isMobile.value = window.innerWidth <= 768
        if (window.innerWidth > 768 && showMobileMenu.value) {
            showMobileMenu.value = false
        }
    }

    // 处理菜单选择事件
    const handleSelect = (key) => {
        activeIndex.value = key
        router.push(activeIndex.value)
        console.log(activeIndex.value)
    }

    // 处理移动端菜单点击
    const handleMobileMenuClick = (url) => {
        activeIndex.value = url
        router.push(url)
        showMobileMenu.value = false
    }

    // 处理下拉菜单命令
    const handleCommand = (c) => {
        switch (c) {
            case "logout":
                handleLogout()
                break;
            case "rePassword":
                openRePasswordForm()
                break;
            case "userInfo":
                router.push("/userInfo")
                break;
        }
    }

    // 刷新页面
    const handleRefresh = () => location.reload()

    onMounted(() => {
        handleResize() // 初始化一次
        window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize)
    })
</script>

<style scoped>
    .f-header {
        @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
        height: 90px;
        z-index: 999;
        padding: 0 20px;
    }

    .logo-section {
        width: 250px;
        @apply flex justify-center items-center text-2xl font-thin;
    }

    .logo {
        width: 40px;
        margin: 0 10px;
    }

    .system-name {
        font-size: 15px;
    }

    .icon-btn {
        @apply flex justify-center text-2xl items-center;
        width: 60px;
        height: 90px;
        cursor: pointer;
    }

    .icon-btn:hover {
        @apply bg-indigo-600;
    }

    .menu-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .el-menu {
        background-color: transparent;
        border-bottom: none;
        height: 90px;
        width: 900px;
    }

    .el-menu-item {
        color: white;
        width: 130px;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-sub-menu .el-sub-menu__hide-arrow {
        display: none;
    }

    .el-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .el-menu-item.is-active {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .dropdown {
        height: 90px;
        cursor: pointer;
        @apply flex justify-center items-center mx-5;
    }

    /* 汉堡菜单按钮 (移动端) */
    .hamburger-btn {
        display: none;
        cursor: pointer;
        padding: 10px;
        margin-right: 10px;
    }

    /* 移动端菜单 */
    .mobile-menu {
        display: none;
    }

    /* 手机端自适应样式 */
    @media (max-width: 768px) {
        .f-header {
            height: 90px;
            padding: 0 15px;
        }

        .system-name {
            display: none;
        }

        .logo-section {
            width: auto;
        }

        .icon-btn {
            width: 50px;
            height: 90px;
        }

        .dropdown {
            height: 90px;
            margin: 0 10px;
        }

        /* 隐藏桌面端菜单 */
        .desktop-menu {
            display: none !important;
        }

        /* 显示汉堡菜单按钮 */
        .hamburger-btn {
            display: flex;
            align-items: center;
        }

        /* 移动端菜单样式 */
        .mobile-menu {
            position: fixed;
            top: 90px;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .mobile-menu-items {
            width: 50%;
            background: #4c6ef5;
            padding: 20px 0;
            overflow-y: auto;
            z-index: 1001;
        }

        .mobile-menu-item {
            padding: 15px 20px;
            color: white;
            font-size: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
        }

        .mobile-menu-item.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .mobile-menu-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .mobile-menu-mask {
            flex: 1;
            background: rgba(0, 0, 0, 0.5);
        }

        /* 移动端菜单激活状态 */
        .mobile-menu-active .mobile-menu {
            transform: translateX(0);
        }
    }

    /* 超小屏幕手机 */
    @media (max-width: 480px) {
        .f-header {
            padding: 0 10px;
        }

        .logo {
            width: 35px;
            margin: 0 5px;
        }

        .icon-btn {
            width: 40px;
        }

        .mobile-menu-items {
            width: 50%;
        }
    }
</style>
